<script lang="ts" setup>
import PageDialog from "@/components/PageDialog/index.vue";
import {ref} from "vue";
import {
  addOwnerRentOrder,
  agreeAll, autoCreateRentOrder,
  editOwnerEle, editOwnerRent, ownerList, ownerRentList, projectList,
} from "@/api/demoApi";
import { Plus } from '@element-plus/icons-vue'
import {message} from "@/utils/message";

defineOptions({
  name: "auditAgree"
});

/**-------------------表单相关-------------------**/
//表单参数
const formData = ref({
  projectId: null,
  ownerId: null,
  files: []
})
const auditFiles = ref([])

//表单校验
const formRules = ref({
  // files:[{required:true,message:'请上传卡片审核结果',trigger:['blur','change']}],
})

//项目选项
const projectOptions = ref([])
const ownerOptions = ref([])
const getProjectOptions = ()=>{
  projectOptions.value = projectList().map(item=>({value:item.id,label:`${item.projectNo}(${item.projectName})`}))
}
const getOwnerOptions = ()=>{
  ownerOptions.value = ownerList().map(item=>({value:item.id,label:item.ownerName}))
}

//自动生成结果
const orderResultData = ref([])

/**-------------------打开弹框-------------------**/
//标题
const dialogTitle = ref('')
const dialog = ref()
const active = ref(0)
//弹框显示
const dialogShow = (title: string,data?: object)=>{
  dialogTitle.value = title
  if(data) {
    formData.value.projectId = data.projectId
    formData.value.ownerId = data.ownerId
    getProjectOptions()
    getOwnerOptions()
  }
  dialog.value.dialogVisible = true
}
defineExpose({
  dialogShow
})

/**-------------------事件回调-------------------**/
//取消
const form = ref()
const handlerCancel = ()=> new Promise(async (resolve,reject)=>{
  try{
    active.value = 0
    formData.value = {
      projectId: null,
      ownerId: null,
      files: []
    }
    orderResultData.value = []
    dialog.value.dialogVisible = false
    resolve({})
  }catch(e){
    console.log(e)
    reject(e)
  }
})
//上一步
const prevHandler = ()=>{
  active.value = 0
}
//下一步
const nextHandler = ()=>{
  active.value = 1
  const auditContract = ownerRentList(formData.value.projectId,formData.value.ownerId).filter(i=>i.status === 0)[0] ?? null
  if(auditContract) {
    orderResultData.value = autoCreateRentOrder(auditContract)
  }
}
//移除某条订单
const removeResultOrder = index => {
  orderResultData.value.splice(index,1)
}
//确认
const emits = defineEmits(['done'])
const handlerConfirm = ()=> new Promise(async (resolve,reject)=>{
  try{
    //todo 新增、编辑接口
    agreeAll(formData.value.projectId,formData.value.ownerId)
    message('审核完成', { type: "success" });
    orderResultData.value.forEach((item,index)=>item.orderNo = `${index+1}/${orderResultData.value.length}`)
    addOwnerRentOrder(orderResultData.value)
    message('已生成订单', { type: "success" });
    await handlerCancel()
    emits('done')
    resolve({})
  }catch(e){
    reject(e)
  }
})
</script>

<template>
  <PageDialog ref="dialog" :buttons="active===0 ? ['cancel'] : ['cancel','confirm']" :handler-cancel="handlerCancel" :handler-confirm="handlerConfirm" :title="dialogTitle" width="60%">
<!--    审核表单-->
    <el-form v-if="active===0" ref="form" :model="formData" :rules="formRules" label-position="top" label-width="auto">
      <el-form-item label="项目名称" prop="projectId">
        <el-select v-model="formData.projectId" clearable disabled filterable placeholder="请选择项目名称">
          <el-option v-for="(item,index) in projectOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属业主" prop="ownerId">
        <el-select v-model="formData.ownerId" clearable disabled filterable placeholder="请选择所属业主">
          <el-option v-for="(item,index) in ownerOptions" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核结果" prop="files">
        <el-upload
          v-model:file-list="auditFiles"
          :limit="9"
          action="#"
          class="avatar-uploader"
          drag
          list-type="picture"
          multiple
          show-file-list
        >
          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
<!--订单-->
    <template v-if="active===1">
      <el-row class="result_tip" justify="center" type="flex">请确认订单自动生成结果</el-row>
      <el-table :data="orderResultData">
        <el-table-column align="center" type="index" />
        <el-table-column align="center" label="订单类型" prop="orderType">
          <template #default="{row}">
            <span v-if="row.orderType === 0">租金G</span>
            <span v-if="row.orderType === 1">租金S</span>
            <span v-if="row.orderType === 2">对私年均</span>
            <span v-if="row.orderType === 3">对公年均</span>
            <span v-if="row.orderType === 4">保证金</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="期数" show-overflow-tooltip>
          <template #default="{$index}">
            {{$index + 1}}/{{orderResultData.length}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开始日期" prop="orderStart" show-overflow-tooltip />
        <el-table-column align="center" label="结束日期" prop="orderEnd" show-overflow-tooltip />
        <el-table-column align="center" label="订单金额(元)" prop="orderPrice" show-overflow-tooltip />
        <el-table-column align="center" label="订单备注" prop="remark" show-overflow-tooltip />
        <el-table-column align="center" label="操作">
          <template #default="{$index}">
            <el-button size="small" text type="danger" @click="removeResultOrder($index)">删除该条</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--    操作-->
    <template #button>
      <el-button v-if="active===1" type="info" @click="prevHandler">
        上一步
      </el-button>
      <el-button v-if="active===0" type="primary" @click="nextHandler">
        下一步
      </el-button>
    </template>
  </PageDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form) {
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //flex-wrap: wrap;

  .el-form-item {
    //width: 48%;

    .el-input,
    .el-input-number,
    .el-date-picker,
    .el-select {
      width: 100%;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      text-align: center;
      width: 12vh;
      height: 3vh;
    }
  }
}

.result_tip {
  font-size: 1.5vh;
  color: #999;
  margin-bottom: 1vh;
}
</style>
